<template lang="html">
  <div class="main-page" id="loan-page">
    <!-- 标题 -->
    <van-nav-bar class="main-header" title="vip" :left-arrow="false" :fixed="true" :z-index="11" />
    <!-- 主体内容 -->
    <div class="main-content has-main-tabbar has-header-space">
      <div class="notice_bar" v-if="is_show">
        <div class="notice_icon"></div>
        <div class="notice_close" @click="closeNotice"></div>
        <div class="notice_txt">美家美货售后只在平台类进行，凡以客服名义电联要您点击陌生链接、理赔二维码、密码或验证码，声称给您退款或转账等涉及钱款的均为假冒客服，提高警惕，谨防诈骗！</div>
      </div>
      <div class="pay">
        <div class="pay-container">
              <img src="https://mjmh.meijiameihuo.com/wechat/images/shopping_cart/empty_pay.png" class="empty-img" alt="" />
            <div class="pay-price">支付成功</div>
            <span style="color:#999999;font-size:13px;">付款金额：</span><span style="color:#E91F3F;font-size:13px;font-weight:bold;">￥{{orderlist.order_payment_amount}}</span>
        </div>
      </div>
      <!-- 订单信息 -->
      <!-- 地址 -->
        <div class="order-address">
        <span class="order-address-name">{{orderlist.name}}</span><span class="order-address-mobile">{{orderlist.mobile}}</span>
        <div class="order-address-item">{{orderlist.address}}</div>
      </div>
        <!-- 展示 -->
          <!-- 购物车商品列表 -->
          <div class="order-id" >订单编号：{{orderlist.order_id}} </div>
           <div class="shop-block" v-for="(items, itemindex) in orderlist.item" :index="itemindex" :key="itemindex">
            <div class="shop-block-item" v-for="(i, index) in items.order_item" :index="index" :key="index">
              <div >
                <router-link :to="{ path: '/main/shopDetails', query:{item_id: item.item_id, activity_id: item.activity_id, activity_name: item.activity_name, isBuy: orderlist.is_gift_bag === 1 ? 1 : 0}}">
              <van-row>
               <van-col span="6">
                <div class="shop-select">
                <img style="width:60px;height:60px;" :src="i.order_item_image" alt="" />
              </div>
                </van-col>
                 <van-col span="16" >
                  <span class="order-spec">{{i.product_name}}</span>
                  <template v-for="(tab_names, tab_names_index) in i.activity_tab_names" :index="tab_names_index">
                    <div class="" :key="tab_names_index">
                      <div v-if="tab_names === '券'" class="coupon">{{tab_names}}</div>
                      <div v-else class="discount">{{tab_names}}</div>
                    </div>
                </template>
                </van-col>
                <van-col span="2" >
                  <span style="padding-left:15px;padding-top:10px;" class="order-id">x{{i.order_item_quantity}}</span>
                </van-col>
              </van-row>
            </router-link>
            </div>
          </div>
        </div>
        <!--  -->
        <div>
          <div class="go-shop-btn" @click="gobuy">继续购物</div>
          <div class="go-order-btn" @click="lookDetail">查看订单</div>
        </div>

      <!-- 猜你喜欢 -->
        <div class="recommend-shop" v-if="dataList.length !==0">
        <div style="display:inline-block;border:0.3px solid #D8D8D8;width:100px;margin:0 25px 5px 0;"></div>
         <div style="display:inline-block;position:relative;top:2px;left:0;width:14px;height:13px;margin-right:5px;background:url('https://mjmh.meijiameihuo.com/wechat/images/shopping_cart/heart.png') no-repeat 50% 50%;">
         </div>
        <div class="recommend-text">猜你喜欢</div>
        <div style="display:inline-block;border:0.3px solid #D8D8D8;width:100px;margin:0 0 5px 20px;"></div>
          <!-- 商品图片框 -->
          <div class="shop-list">
            <van-row >
              <van-col span="12" v-for="(item, index) in dataList" :key="index">
                <div style="position:relative;">
                  <router-link :to="{ path: '/main/shopDetails', query:{item_id: item.item_id, activity_id: item.activity_id, activity_name: item.activity_name}}">
                  <lengthways-list :data="item"> </lengthways-list>
                  </router-link>
                </div>
              </van-col>
            </van-row>
          </div>
        </div>
      <div v-if="popout">
        <van-popup custom-class="popout-wrap" v-model="popout" bind:close="onClose">
        <div class="popout">
          <div class="popout-image"></div>
          <div class="popout-info">
          <div class="popout-info-text">商品确认收货9天后</div>
          <div class="popout-info-text1">返利将发放至您的可用余额</div>
        </div>
          <div class="popout-btn" @click="onClose">我知道了</div>
        </div>
        </van-popup>
      </div>
      <van-toast id="van-toast" />
      <van-toast id="van-toast" />
    </div>
  </div>
</template>

<script>
import LengthwaysList from '@/components/shop/lengthways-list.vue'

export default {
  components: { LengthwaysList },
  data () {
    return {
      active: 2,
      cart_id: '',
      orderlist: {},
      dataList: [],
      shippingAddress: '',
      shippingTitle: '',
      shippingLabel: '',
      ud_id: '',
      order_id: '',
      clickFlag: false,
      user_money: true,
      user_points: true,
      shop_coupons: null,
      activity_id: '',
      coupons: '',
      isAddress: true,
      order_payment_amount: '',
      loading: { txt: '没有更多啦' },
      is_show: true,
      is_back: true,
      popout: false
    }
  },
  created () {
    console.log(this.$route)
    this.$toast.loading({
      mask: true,
      message: '加载中...'
    })
    this.getList()
    if (this.$route) {
      this.order_id = this.$route.query.orderId
      // this.paySuccess(this.$route.query.orderId)
      // this.getOrderDetails(this.$route.query.orderId)
    }
  },
  destroyed () {
    if (this.is_back) {
      // wx.switchTab({
      //   url: '/pages/tabbar/home/home',
      // })
    }
  },
  methods: {
    onClose () {
      this.popout = false
    },
    closeNotice (e) {
      this.is_show = false
    },
    // paySuccess (id) { // 支付成功
    //   this.$toast.loading({
    //     mask: true,
    //     message: '加载中...'
    //   })
    //   var data = {}
    //   return new Promise((resolve, reject) => {
    //     this.$Axios({ url: 'pay_success/' + id, data, method: 'get' }).then((res) => {
    //       if (res.return_code === '0000') {
    //         if (res.data.popout === true) {
    //           that.popout = res.data.popout
    //         }
    //         console.log('请求成功')
    //       }
    //       Toast.clear()
    //       resolve()
    //     }).catch((error) => {
    //       Toast.clear()
    //       console.log('请求失败', error)
    //     })
    //   })
    // },
    // getOrderDetails(id) { // 获取支付成功订单详情
    //   var that = this
    //   var data = {}
    //   return new Promise((resolve, reject) => {
    //     this.$Axios({ url: 'orders/' + id, data, method: 'get' }).then((res) = {
    //       if (res.return_code === '0000') {
    //         if (res.data) {
    //           that.orderlist = res.data
    //         }
    //         console.log('请求成功')
    //         console.log(this.orderlist)
    //       }
    //       this.$toast.clear()
    //       resolve()
    //     }).catch((error) => {
    //       this.$toast.clear()
    //       console.log('请求失败', error)
    //     })
    //   })
    // },
    // getList () { // 获取推荐列表
    //   var data = {}
    //   return new Promise((resolve, reject) => {
    //     this.$Axios({ url: 'recommend_product/', data, method: 'get' }).then((res) => {
    //       if (res.return_code === '0000') {
    //         if (res.data) {
    //           that.dataList = res.data.list
    //         }
    //         console.log(data)
    //         console.log('请求成功')
    //       }
    //       resolve()
    //     }).catch((error) => {
    //       console.log('请求失败', error)
    //     })
    //   })
    // },
    gobuy () {
      console.log('继续')
      this.is_back = false
      // wx.switchTab({
      //   url: '/pages/tabbar/home/home',
      // })
    },
    lookDetail () {
      console.log('查看详情')
      this.is_back = false
      // wx.navigateTo({
      //   url: '/pages/orderDetail/orderDetail?orderId=' + this.data.orderlist.order_id,
      // })
    }
  }
}
</script>
<style lang="scss" scoped>
.notice_bar {
  color: #CB9956;background: #FDF7ED;
  font-size: 12px;
  padding: 5px 45px 5px 35px;
  position: relative;
  z-index: 9;
}
.notice_bar .notice_icon {
  width: 15px; height: 15px;
  background: url("https://mjmh.meijiameihuo.com/wechat/images/shopping_cart/waring.png") no-repeat center;
  background-size: 80%;
  position: absolute; top:30px;  left: 15px;
}
.notice_bar .notice_close {
  width: 15px; height: 15px;
  background: url("https://mjmh.meijiameihuo.com/wechat/images/common/close.png") no-repeat center;
  background-size: 80%;
  position: absolute; top:30px;  right: 15px;
}
.notice_bar .notice_txt {
  font-family: PingFangSC-Regular;
  border: none;
  color: #CB9956;
  font-size: 12px; line-height: 17px;
  text-align: left;
  background: none;
  padding: 0;
}
.pay{
  position: relative!important;
  background-color: #ffffff;
  border-bottom: 1px solid #E5E5E5;
}
.pay-message{
  height:70px;
  color: #CB9956;
  font-size: 12px;
  padding: 12px;
  text-align: center;
  line-height: 20px;
  background-color: #FDF7ED;
}
.pay-container{
  background-color: #ffffff;
  height: 150px;
  text-align: center;
  padding-top: 25px;
}
.empty-img{
  width:90px;height:65px;
  text-align: center;
  margin: auto;
}
.go-shop-btn{
 display: inline-block;
  margin: 10px 50px 0 50px;
  width: 115px;
  height:35px;
  color:#ffffff;
  font-size: 16px;
  text-align: center;
  line-height: 35px;
  background-color: #DFC399;
}
.go-order-btn{
  display: inline-block;
  margin: 10px 0 0 0;
  width: 115px;
  height:35px;
  color:#ffffff;
  font-size: 16px;
  text-align: center;
  line-height: 35px;
  background-color: #E91F3F;
}
.van-button{
  position: absolute!important;
  top: 50%;
  left:0;
  right:0;
  bottom: 50%;
  width: 90%!important;
  color: #FFFFFF!important;
  background-color: #E91F3F!important;
}
.order-id{
  background-color: #ffffff;
  padding: 8px 15px;
  color: #999999;
  font-size: 14px;
}
.order-spec{
  font-size:14px;
  color:#000000; padding-bottom:5px;
  word-break:break-all;
  overflow:hidden;
  text-overflow:ellipsis;
  display:-webkit-box;
  -webkit-line-clamp:1;
  -webkit-box-orient:vertical
}
.discount {
  display: inline-block;
  height: 14px;
  border-radius: 2px;
  font-size: 12px;
  text-align: center;
  line-height: 14px;
  color: #fff;
  margin-right: 5px;
  margin-top: 10px;
  padding: 0 5px;
  background-color: #E91F3F;
}
.coupon {
  display: inline-block;
  width: 20px;
  height: 15px;
  border-radius: 2px;
  font-size: 12px;
  text-align: center;
  line-height: 15px;
  color: #ffffff;
  margin-right: 5px;
  margin-top: 10px;
  background-image: url('https://mjmh.meijiameihuo.com/wechat/images/home/coupon.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.order-address{
  /* height:120rpx; */
  background-color: #FFFFFF;
  padding:15px;
  border-bottom: 1px solid #E5E5E5;
}
.order-address-name{
  color: #17273A;
  font-size: 15px;
  font-weight: bold;
  padding: 0 30px 5px 0;
}
.order-address-mobile{
  color: #17273A;
  font-weight: bold;
  font-size: 15px;
}
.order-address-item{
  color: #17273A;
  font-size: 13px;
  padding-top:5px;
}
.pay-price{
  color:#CB9956;
  font-size: 16px;
  font-weight: bold;
}
.shop-block-item{
  height:60px;
  padding: 20px;
  border-bottom: 1px solid #E5E5E5;
  background-color: #FFFFFF;
}
.van-button{
  position: fixed!important;
  bottom: 0;
  color: #FFFFFF!important;
  background-color: #E91F3F!important;
}
.recommend-shop{
  /* border: 1px solid red; */
  width: 100%;
  margin-top: 30px;
  text-align: center;
}
.recommend-text{
  font-size: 12px;
  color: #999999;
  margin-bottom: 20px;
  display:inline-block;
}
.icon-btn{
  position: absolute;
  top: 85%;
  right:0;
  margin-right: 10px;
  border: 1px solid #ccc;
}
.van-submit-bar__bar--safe{
  padding: 0 !important;
}
.shop-list{
  background-color: #FFFFFF;
}
/* 弹框 */
.van-popup{
  top:52%!important;
}
.popout{
  position: relative;
  width:315px;
  height:340px;
  padding:0;
}
.popout-wrap{
  border-radius: 5px;
  background-color: rgba(0, 0, 0, 0)!important;
}
.popout-image{
  position:relative;
  top:40px;
  left:0;
  width:315px;
  height:160px;
  color: #17273A;
  text-align: center;
  font-size: 16px;
  background: url("https://mjmh.meijiameihuo.com/wechat/images/shopping_cart/profits.png") no-repeat center;
  background-size: 100%;
  z-index:110;
}
.popout-info{
  width:315px;
  height:125px;
  color: #17273A;
  text-align: center;
  font-size: 16px;
  background-color: #ffffff;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}
.popout-info-text{
  padding:49px 70px 0 70px;
}
.popout-info-text1{
  padding:0 50px 30px 50px;
}
.popout-btn{
  width:100%;
  height:49px;
  line-height: 49px;
  text-align: center;
  color: #FFFFFF;
  font-size: 17px;
  background-color: #E91F3F;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
}
.van-transition{
  background-color:rgba(0, 0, 0, .9)!important;
}
</style>
